<template>
     <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>

     
         <router-link to="/VehicleList">车辆管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>新增车辆信息</el-breadcrumb-item>
 </el-breadcrumb></div>
 <el-form ref="ruleFormRef" style="max-width: 1000px" :model="form" :rules="rules" label-width="auto" 
        class="demo-ruleForm" :size="formSize" status-icon>
         <el-row :gutter="40">
    <el-col :span="11">
         <el-form-item label="厂牌型号：" prop="brandAndModel">
            <el-input v-model="form.brandAndModel" placeholder="请输入车牌号" />
        </el-form-item>
         <el-form-item label="司机姓名：" prop="driverName">
            <el-input v-model="form.driverName" placeholder="请输入司机姓名" />
        </el-form-item>
        <el-form-item label="车型：" prop="licensePlateNumber">
            <el-input v-model="form.vehicleLong" placeholder="长" style="width: 40px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
             <el-input v-model="form.vehicleWide" placeholder="宽" style="width: 40px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-input v-model="form.vehicleTall" placeholder="高" style="width: 40px;"/> 
        </el-form-item>
         <el-form-item label="购置日期：" prop="acquisitionDate">
             <el-date-picker
             v-model="form.acquisitionDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入购置日期"
            style="width: 100%"
          />
           
        </el-form-item>
         <el-form-item label="保险到期日期：" prop="insuranceExpirationDate">
             <el-date-picker
             v-model="form.insuranceExpirationDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入保险到期日期"
            style="width: 100%"
          />
           
        </el-form-item>
         <el-form-item label="保养公里数设置：" prop="maintenanceMileageSetting">
            <el-input v-model="form.maintenanceMileageSetting" placeholder="请输入保养公里数设置" />
        </el-form-item>
         <el-form-item label="车辆照片：" prop="vehicleImg">
             <el-upload
    class="avatar-uploader"
    action="http://113.44.151.225:8000/bwrite/api/CargoOwner/GetPicName"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
   
  >
    <img v-if="form.vehicleImg" :src="'http://113.44.151.225:8000/bwrite/Pic/'+form.vehicleImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
           
        </el-form-item>
         <el-form-item label="保险卡照片" prop="insuranceCarImg">
             <el-upload
    class="avatar-uploader"
    action="http://113.44.151.225:8000/bwrite/api/CargoOwner/GetPicName"
    :show-file-list="false"
    :on-success="handleAvatarSuccess1"
   
  >
    <img v-if="form.insuranceCarImg" :src="'http://113.44.151.225:8000/bwrite/Pic/'+form.insuranceCarImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
         
        </el-form-item>
    </el-col>
    <el-col :span="11">
        <el-form-item label="车牌号:" prop="plateNumber">
            <el-input v-model="form.plateNumber" placeholder="请输入车牌号" />
        </el-form-item>
          <el-form-item label="所属公司:" prop="belongingCompany">
            <el-input v-model="form.belongingCompany" placeholder="请输入所属公司" />
        </el-form-item>
         <el-form-item label="车辆颜色：" prop="vehicleColor">
            <el-input v-model="form.vehicleColor" placeholder="请输入车辆颜色" />
        </el-form-item>
         <el-form-item label="营运证号：" prop="tradingCard">
            <el-input v-model="form.tradingCard" placeholder="请输入营运证号" />
        </el-form-item>
         <el-form-item label="年检到期日期：" prop="annualInspectionExpiratDate">
            <el-date-picker
             v-model="form.annualInspectionExpiratDate"
            type="date"
           value-format="YYYY-MM-DD"
           placeholder="请输入年检到期日期"
            style="width: 100%"
          />
           
        </el-form-item>
    </el-col>
  </el-row>
    
        <el-form-item style="margin-left: 400px;;">
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="resetForm">取消</el-button>
        </el-form-item>
    </el-form> 
</template>
<script lang="ts" setup>
//图片上传
import { Plus } from '@element-plus/icons-vue'
const handleAvatarSuccess = (val:any) => {
    form.vehicleImg = val
}
const handleAvatarSuccess1 = (val:any) => {
    form.insuranceCarImg = val
}
//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//变量
const form= reactive({
  "brandAndModel": "",
  "plateNumber": "",
  "driverName": "",
  "belongingCompany": "",
  "vehicleLong": "",
  "vehicleWide": "",
  "vehicleTall": "",
  "vehicleColor": "",
  "acquisitionDate": "",
  "tradingCard": "",
  "insuranceExpirationDate": "",
  "annualInspectionExpiratDate": "",
  "maintenanceMileageSetting": "",
  "vehicleImg": "",
  "insuranceCarImg": ""
})
//方法
//添加车辆信息
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import  { ElMessage} from 'element-plus'
import { number } from 'echarts';
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//验证
const rules = reactive<FormRules>({
    brandAndModel: [
        { required: true, message: '厂牌型号不能为空', trigger: 'blur' },
        
    ],
    plateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
        
    ],
    driverName: [
        { required: true, message: '司机姓名不能为空', trigger: 'blur' },
        
    ],

    belongingCompany: [
        { required: true, message: '所属公司不能为空', trigger: 'blur' },
        
    ],
    vehicleColor: [
        { required: true, message: '车辆颜色不能为空', trigger: 'blur' },
        
    ],
    acquisitionDate: [
        { required: true, message: '购置日期不能为空', trigger: 'blur' },
        
    ],
    tradingCard: [
        { required: true, message: '营运证号不能为空', trigger: 'blur' },
        
  ],
        insuranceExpirationDate: [
        { required: true, message: '保险到期日期不能为空', trigger: 'blur' },
        
  ],
        annualInspectionExpiratDate: [
        { required: true, message: '年检到期日期不能为空', trigger: 'blur' },
        
  ],
        maintenanceMileageSetting: [
        { required: true, message: '保养公里数设置不能为空', trigger: 'blur' },
        
  ],
        vehicleImg: [
        { required: true, message: '车辆照片不能为空', trigger: 'blur' },
        
  ],
     insuranceCarImg: [
        { required: true, message: '保险卡照片不能为空', trigger: 'blur' },
        
    ],
        
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
          
          if (form.vehicleLong == "" || form.vehicleWide == "" || form.vehicleTall == "") {
            ElMessage.error("车辆尺寸不能为空")
            return
          }
         
            axios.post("/bwrite/api/Vehicle/CreateVehicle", form).then(ter => {
                if (ter.data.code > 0) {
                    ElMessage.success("添加成功")
                  router.push("/VehicleList")
                } else {
                    ElMessage.error("添加失败")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = () => {
  router.push("/VehicleList")
}
//钩子函数
onMounted(async () => {
   
})
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
 



